<template>
  <div class="fans-container">
    <div><el-button

      type="success"
      round
      size="small"
      :loading="flag"
      @click.native ="update"
    >
      添加/更新数据
    </el-button></div>
    <!-- 1. 为 ECharts 准备一个具备大小（宽高）的画布容器 DOM -->
    <div ref="model" style="width: 100%;height:500px;"></div><br>
    <h2>预测结果</h2>
    <div style="margin-top: 20px">
      <span style="margin-right: 8px">模板天数</span>
      <el-radio-group v-model="query.mday" size="small" :disabled="flag">
        <el-radio-button label="5"></el-radio-button>
        <el-radio-button label="6"></el-radio-button>
        <el-radio-button label="7"></el-radio-button>
        <el-radio-button label="8"></el-radio-button>
        <el-radio-button label="9"></el-radio-button>
        <el-radio-button label="10"></el-radio-button>
        <el-radio-button label="11"></el-radio-button>
        <el-radio-button label="12"></el-radio-button>
        <el-radio-button label="13"></el-radio-button>
        <el-radio-button label="14"></el-radio-button>
        <el-radio-button label="15"></el-radio-button>
      </el-radio-group>
    </div>
    <div style="margin-top: 20px;">
      <span style="margin-right: 8px">预测天数</span>
      <el-radio-group v-model="query.fday" size="small" :disabled="flag">
        <el-radio-button label="1"></el-radio-button>
        <el-radio-button label="2"></el-radio-button>
        <el-radio-button label="3"></el-radio-button>
        <el-radio-button label="4"></el-radio-button>
        <el-radio-button label="5"></el-radio-button>
        <el-radio-button label="6"></el-radio-button>
        <el-radio-button label="7"></el-radio-button>
        <el-radio-button label="8"></el-radio-button>
        <el-radio-button label="9"></el-radio-button>
        <el-radio-button label="10"></el-radio-button>
        <el-radio-button label="15"></el-radio-button>
        <el-radio-button label="20"></el-radio-button>
        <el-radio-button label="25"></el-radio-button>
        <el-radio-button label="30"></el-radio-button>
        <el-radio-button label="60"></el-radio-button>
        <el-radio-button label="90"></el-radio-button>
        <el-radio-button label="120"></el-radio-button>
        <el-radio-button label="150"></el-radio-button>
      </el-radio-group>
    </div>
    <div ref="forecate" style="width: 100%;height:500px;"></div>
  </div>
</template>

<script>
// 2. 加载 echarts
import echarts from 'echarts'
import { forecast, add } from '@/api/hushen'
import { Message } from 'element-ui'
export default {
  name: 'hushen',
  components: {},
  props: {},
  data () {
    return {
      query: {
        mday: 10, // 模板天数
        fday: 1 // 预测天数
      },
      result: {
        mdata: [],
        mdate: [],
        mMax: 0,
        mMin: 0,
        fdata: [],
        fdate: [],
        fMax: 0,
        fMin: 0
      },
      hushen: {
        名称: '沪深300',
        收盘价: 0,
        涨跌幅: 0
      },
      dialogFormVisible: false,
      flag: false,
      formRules: { // 表单验证规则
        收盘价: [
          {
            required: true,
            message: '请输入收盘价',
            trigger: 'blur'
          }
        ],
        涨跌幅: [
          {
            required: true,
            message: '请输入涨跌幅',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {},
  watch: {
    query: {
      deep: true, // 深度监听设置为 true
      handler: function (newValue, oldValue) {
        this.forecastResult()
      }
    }
  },
  created () {
    this.forecastResult()
  },
  // 注意：初始化操作 DOM 一定要写到 mounted 钩子函数中
  mounted () {},
  methods: {
    forecastResult () {
      this.flag = true
      forecast(this.query).then(resp => {
        if (resp.data.code === 20000) {
          this.result = resp.data.data

          // 3. 基于准备好的dom，初始化echarts实例
          var modelChart = echarts.init(this.$refs.model)

          // 指定图表的配置项和数据
          var modelOption = {
            xAxis: {
              type: 'category',
              data: this.result.mdate
            },
            yAxis: {
              min: this.result.mMin,
              max: this.result.mMax,
              type: 'value'
            },
            series: [{
              data: this.result.mdata,
              type: 'line'
            }]
          }

          // 使用刚指定的配置项和数据显示图表。
          modelChart.setOption(modelOption)

          // 3. 基于准备好的dom，初始化echarts实例
          var forecateChart = echarts.init(this.$refs.forecate)

          // 指定图表的配置项和数据
          var forecateOption = {
            xAxis: {
              type: 'category',
              data: this.result.fdate
            },
            yAxis: {
              min: this.result.fMin,
              max: this.result.fMax,
              type: 'value'
            },
            series: [{
              data: this.result.fdata,
              type: 'line'
            }]
          }

          // 使用刚指定的配置项和数据显示图表。
          forecateChart.setOption(forecateOption)


        } else {
          Message({
            type: 'warning',
            message: resp.data.message
          })
        }
      }).catch(() => {})
      this.flag = false
    },
    update () {
      this.flag = true
      add().then(resp => {
        if (resp.data.code === 20000) {
          // 更新数据
          this.forecastResult()
          Message({
            type: 'success',
            message: resp.data.message
          })
        } else {
          Message({
            type: 'warning',
            message: resp.data.message
          })
        }
      }).catch(() => {})
    }
  }
}
</script>

<style scoped lang="less">
</style>
